<template>
	<view class="header">
		<view class="header-wrapper">
			<view class="header-main">
				<view class="header-left">
					<view class="line"></view>
					<view class="logo" @tap.stop="$tools.jump('./index')">
						<image src="@/static/logo.png" mode=""></image>
						<!-- <view class="title">名称</view> -->
					</view>
				</view>
				<template v-if="mobile_flag == true">
					<view class="mobileImg" @tap.stop="checkRight()">
						<image src="@/static/public/setup.png" mode=""></image>
					</view>
				</template>
				<view class="mobileBox" :class="{'mobileBox--active' : right_status == true}">
					<view class="header-right">
						<view class="activeBox">
							<view class="vipBox" v-if="userInfo.expire_date != null && userInfo.expire_date != ''">
								<image class="vip" src="@/static/public/vip.png" mode=""></image>
								<text>有效期至 {{ userInfo.expire_date.substr(0,4)+'-'+userInfo.expire_date.substr(4,2)+'-'+userInfo.expire_date.substr(6,2)
								+' '+userInfo.expire_time.substr(0,2)+':'+userInfo.expire_time.substr(2,2)+':'+userInfo.expire_time.substr(4,2) }}</text>
							</view>
							<view class="operateBox">
								<image class="exchange" src="@/static/public/exchange.png" mode=""></image>
								<view class="tipsBox-right">
									<view class="searchBox">
										<input type="text" placeholder="输入卡密" placeholder-class="inputSearch" v-model="cardPsd" />
									</view>
									<view class="btn" @tap.stop="getActive()">激活</view>
									<view class="btn btn--ML" @tap.stop="getImg()">查看教程</view>
								</view>
							</view>
						</view>
						<view class="accountBox" @tap.stop="checkSelect()">
							<image class="avatar" src="@/static/public/avatar.png" mode=""></image>
							<view class="title">{{ user.sys_user_account | conceal(4) }}</view>
							<!-- <view class="btn" v-if="mobile_flag == true" @tap.stop="">修改密码</view> -->
							<view class="btn" v-if="mobile_flag == true" @tap.stop="userLogOut()">退出登录</view>
							<view class="logOutBox" v-if="select_status">
								<view class="logOutBox-item" @tap.stop="userLogOut()">
									<image src="@/static/public/logout.png" mode=""></image>
									<view class="logout">退出登录</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				user: {},
				select_status: false,
				cardPsd: '',
				mobile_flag: false,
				right_status: false,
				userInfo: {},
				isToggle: true,
			}
		},
		mounted() {
			this.user = uni.getStorageSync('user');
			// console.log("user:",this.user);
			// console.log("index---this.isMobile():",this.isMobile());
			if(this.isMobile()){
				// console.log("移动端");
				this.mobile_flag = true;
			}else{
				this.mobile_flag = false;
			}
			this.getUserInfo();
		},
		methods: {
			// 激活
			getActive(){
				if(this.cardPsd == ''){
					return this.$tools.toast('请输入卡密');
				}
				if(this.isToggle){
					this.isToggle = false;
					var data = {};
					data['secret_key'] = this.cardPsd;
					uni.showLoading({
						mask:true
					})
					this.$Ajax('/api/user/info/setUserSecretKey',data,res => {
							this.isToggle = true;
							if (res.success) {
								this.$tools.toast("卡密激活成功");
								this.cardPsd = '';
								this.getUserInfo();
								this.$emit('getIndexData');
								uni.hideLoading();
							}
						},err => {
							this.isToggle = true;
							uni.hideLoading();
						}
					)
				}
			},
			getImg(){
				let img = '../../static/1.png';
				let that = this;
				uni.previewImage({
					urls:[img],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							console.log("data：",data);
							uni.downloadFile({
							    url: img, //下载资源的 url
							    success: (res) => {
									console.log("res：",res);
							       //下载成功之后的函数，可以拿到返回文件的本地临时路径
								   uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											return that.$tools.toast('保存图像到相册成功');
										},
										fail: function() {
											return that.$tools.toast('保存失败，请稍后重试');
										}
									});
							    }
							})
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			// 查询用户信息
			getUserInfo(){
				var data = {};
				this.$Ajax('/api/user/info/getUserInfo',
				data,
				res => {
						if (res.success) {
							this.userInfo = res.data.userInfo;
							// console.log("this.userInfo:",this.userInfo);
						}
					},err => {
					}
				)
			},
			userLogOut(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定退出登录???',
					success: function (res) {
						if (res.confirm) {
							var data = {};
							that.$Ajax('/api/user/login/userLogOut',
							data,
							res => {
									if (res.success) {
										that.select_status = false;
										that.$tools.toast('退出登录成功');
										uni.removeStorageSync('user');
										uni.removeStorageSync('token');
										setTimeout(function() {
											that.$tools.reLaunch('/pages/operate/login');
										}, 500)
									}else{
								this.$tools.toast(res.msg);
							}
								}
							)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			checkSelect(){
				if(this.mobile_flag == false){
					this.select_status = !this.select_status;
				}
			},
			checkRight(){
				if(this.mobile_flag == true){
					this.right_status = !this.right_status;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		position: fixed;
		top: 0;
		left: 0;right: 0;
		z-index: 9;
		width: 100%;
		height: 140rpx;
		&-wrapper{
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 60rpx 0rpx rgba(0,0,0,0.2);
			width: 100%;
			// padding: 10px 0;
		}
		&-main{
			// width: 1271px;
			width: 100%;
			@include flexBetween;
			margin: auto;
			padding: 0 130rpx;
			height: 140rpx;
		}
		&-left{
			@include flexLeft;
			.line{
				width: 12rpx;
				height: 48rpx;
				background: #D9D9D9 linear-gradient(180deg, #45CAF2 0%, #3DBAE7 30%, #3BA1D7 100%);
				border-radius: 4rpx;
			}
			.logo{
				@include flexLeft;
				cursor: pointer;
				image{
					width: 296rpx;
					height: 112rpx;
					margin: 0 12rpx;
				}
				.title{
					font-size: 36rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}
		}
		&-right{
			@include flexRight;
			.activeBox{
				@include flexRight;
				.vipBox{
					@include flexRight;
					.vip{
						width: 72rpx;
						height: 72rpx;
					}
					text{
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-right: 100rpx;
						margin-left: 16rpx;
					}
				}
				.operateBox{
					@include flexRight;
					.exchange{
						width: 72rpx;
						height: 72rpx;
					}
					.tipsBox-right{
						margin: 0 86rpx 0 16rpx;
						.inputSearch{
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0,0,0,0.9);
						}
					}
				}
			}
			.accountBox{
				@include flexRight;
				background: #F4F4F4;
				padding: 34rpx 46rpx;
				cursor: pointer;
				.avatar{
					width: 72rpx;
					height: 72rpx;
					margin-right: 16rpx;
				}
				.title{
					font-size: 32rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
				position: relative;
				.logOutBox{
					position: absolute;
					right: 0;
					top: 140rpx;
					z-index: 10;
					background: #FFFFFF;
					box-shadow: 0rpx 10rpx 60rpx 0rpx rgba(0,0,0,0.2);
					border-radius: 16rpx;
					padding: 24rpx 98rpx;
					&-item{
						@include flexCenter;
						cursor: pointer;
						image{
							width: 48rpx;
							height: 48rpx;
							margin-right: 16rpx;
						}
						.logout{
							font-size: 32rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							white-space: nowrap;
						}
					}
				}
				.btn{
					background: #3080D3 linear-gradient(180deg, #45CAF2 0%, #3DBAE7 30%, #3BA1D7 100%);
					border-radius: 16rpx;
					opacity: 0.9;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding: 16rpx 20rpx;
					cursor: pointer;
					white-space: nowrap;
					margin-left: 20rpx;
				}
			}
		}
	}
	
	@media (max-width: 1000px) {
		.header{
			&-main{
				padding: 0 50rpx;
				.line{
					width: 8rpx;
					height: 38rpx;
					background: #D9D9D9 linear-gradient(180deg, #45CAF2 0%, #3DBAE7 30%, #3BA1D7 100%);
					border-radius: 4rpx;
				}
				.logo{
					image{
						width: 120rpx;
						height: 50rpx;
						margin: 0 12rpx;
					}
				}
			}
		}
	}
	
	
	@media (max-width: 700px) {
		.header{
			&-wrapper{
				// padding: 20rpx 0;
			}
			&-main{
				padding: 0 50rpx;
				.logo{
					image{
						width: 200rpx;
						height: 80rpx;
						margin: 0 12rpx;
					}
				}
			}
			&-right{
				position: absolute;
				left: 0;right: 0;
				top: 140rpx;
				background: #FFFFFF;
				@include flexLeftColumn;
				padding: 0 20rpx;
				.activeBox{
					@include flexLeftColumn;
					.vipBox{
						margin: 20rpx 0rpx;
					}
				}
				.accountBox{
					background: transparent;
					padding: 34rpx 0rpx;
				}
			}
			.mobileBox{
				display: none;
				&--active{
					display: block !important;
				}
			}
		}
	}
	
	.mobileImg{
		position: absolute;
		right: 50rpx;
		width: 64rpx;
		height: 64rpx;
		cursor: pointer;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	/* #ifdef H5 */
		/deep/ .image-view-area{
			overflow: auto !important;
		}
		/deep/ .image-view-img{
			transform: translate(-50%,0%) !important;
			width: 80vw !important;
			height: 1920px !important;
			top: 0 !important;
		} 
	/* #endif */
</style>